<template>
  <div class="slot-learn">
    <h2>Vue 插槽学习组件</h2>
    
    <!-- 1. 默认插槽 (Default Slot) -->
    <div class="slot-section">
      <h3>1. 默认插槽</h3>
      <div class="slot-demo">
        <slot>
          <p class="fallback">这是默认插槽的后备内容</p>
        </slot>
      </div>
    </div>

    <!-- 2. 具名插槽 (Named Slots) -->
    <div class="slot-section">
      <h3>2. 具名插槽</h3>
      <div class="slot-demo">
        <div class="header-area">
          <slot name="header">
            <h4>默认头部内容</h4>
          </slot>
        </div>
        <div class="content-area">
          <slot name="content">
            <p>默认主要内容</p>
          </slot>
        </div>
        <div class="footer-area">
          <slot name="footer">
            <p>默认底部内容</p>
          </slot>
        </div>
      </div>
    </div>

    <!-- 3. 作用域插槽 (Scoped Slots) -->
    <div class="slot-section">
      <h3>3. 作用域插槽</h3>
      <div class="slot-demo">
        <div class="user-list">
          <div v-for="user in users" :key="user.id" class="user-item">
            <slot name="user" :user="user" :index="user.id" :isActive="user.active">
              <!-- 默认用户展示 -->
              <div class="default-user">
                <span>{{ user.name }}</span>
                <span class="status" :class="{ active: user.active }">
                  {{ user.active ? '在线' : '离线' }}
                </span>
              </div>
            </slot>
          </div>
        </div>
      </div>
    </div>

    <!-- 4. 动态插槽名 (Dynamic Slot Names) -->
    <div class="slot-section">
      <h3>4. 动态插槽名</h3>
      <div class="slot-demo">
        <div class="dynamic-slots">
          <slot :name="dynamicSlotName">
            <p>动态插槽: {{ dynamicSlotName }}</p>
          </slot>
          <button @click="toggleDynamicSlot" class="toggle-btn">
            切换插槽 (当前: {{ dynamicSlotName }})
          </button>
        </div>
      </div>
    </div>

    <!-- 5. 条件插槽 (Conditional Slots) -->
    <div class="slot-section">
      <h3>5. 条件插槽</h3>
      <div class="slot-demo">
        <div class="conditional-slots">
          <div v-if="$slots.premium" class="premium-content">
            <slot name="premium"></slot>
          </div>
          <div v-else class="basic-content">
            <slot name="basic">
              <p>基础内容 (没有提供 premium 插槽)</p>
            </slot>
          </div>
        </div>
      </div>
    </div>

    <!-- 6. 多个作用域插槽 (Multiple Scoped Slots) -->
    <div class="slot-section">
      <h3>6. 多个作用域插槽</h3>
      <div class="slot-demo">
        <div class="product-card">
          <div class="product-header">
            <slot name="product-title" :product="product" :discount="discount">
              <h4>{{ product.name }}</h4>
            </slot>
          </div>
          <div class="product-body">
            <slot name="product-content" :product="product" :formatPrice="formatPrice">
              <p>价格: {{ formatPrice(product.price) }}</p>
              <p>库存: {{ product.stock }}</p>
            </slot>
          </div>
          <div class="product-actions">
            <slot name="product-actions" :product="product" :addToCart="addToCart" :buyNow="buyNow">
              <button @click="addToCart(product)" class="action-btn">加入购物车</button>
              <button @click="buyNow(product)" class="action-btn primary">立即购买</button>
            </slot>
          </div>
        </div>
      </div>
    </div>

    <!-- 7. 插槽传递 (Slot Forwarding) -->
    <div class="slot-section">
      <h3>7. 插槽传递</h3>
      <div class="slot-demo">
        <div class="wrapper">
          <slot name="forwarded" v-bind="forwardedData">
            <p>转发的插槽内容: {{ forwardedData.message }}</p>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 用户数据
const users = ref([
  { id: 1, name: '张三', active: true },
  { id: 2, name: '李四', active: false },
  { id: 3, name: '王五', active: true },
  { id: 4, name: '赵六', active: false }
])

// 动态插槽名
const dynamicSlotName = ref('morning')
const toggleDynamicSlot = () => {
  dynamicSlotName.value = dynamicSlotName.value === 'morning' ? 'evening' : 'morning'
}

// 产品数据
const product = ref({
  id: 1,
  name: 'Vue 学习教程',
  price: 99.99,
  stock: 50
})

const discount = ref(0.8)

// 格式化价格
const formatPrice = (price) => {
  return `¥${(price * discount.value).toFixed(2)}`
}

// 产品操作
const addToCart = (product) => {
  console.log('添加到购物车:', product.name)
  alert(`已将 ${product.name} 添加到购物车`)
}

const buyNow = (product) => {
  console.log('立即购买:', product.name)
  alert(`正在购买 ${product.name}`)
}

// 转发数据
const forwardedData = ref({
  message: '这是转发的数据',
  timestamp: new Date().toLocaleString(),
  level: 'info'
})
</script>

<style scoped>
.slot-learn {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.slot-learn h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
}

.slot-section {
  margin-bottom: 40px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
}

.slot-section h3 {
  background: #f8f9fa;
  margin: 0;
  padding: 15px 20px;
  color: #495057;
  border-bottom: 1px solid #e1e8ed;
}

.slot-demo {
  padding: 20px;
}

/* 默认插槽样式 */
.fallback {
  color: #6c757d;
  font-style: italic;
}

/* 具名插槽样式 */
.header-area {
  background: #e3f2fd;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.content-area {
  background: #f3e5f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.footer-area {
  background: #e8f5e8;
  padding: 10px;
  border-radius: 4px;
}

/* 作用域插槽样式 */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-item {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 12px;
}

.default-user {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  background: #dc3545;
  color: white;
}

.status.active {
  background: #28a745;
}

/* 动态插槽样式 */
.dynamic-slots {
  text-align: center;
}

.toggle-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.toggle-btn:hover {
  background: #0056b3;
}

/* 条件插槽样式 */
.premium-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.basic-content {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 2px dashed #dee2e6;
}

/* 产品卡片样式 */
.product-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  max-width: 400px;
}

.product-header {
  background: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #dee2e6;
}

.product-body {
  padding: 15px;
}

.product-actions {
  padding: 15px;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background: #f8f9fa;
}

.action-btn.primary {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.action-btn.primary:hover {
  background: #0056b3;
}

/* 插槽传递样式 */
.wrapper {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 15px;
}
</style>